<template>
  <view class="mobile-item-container">
    <Navbar title="用户注册" bgColor="#fff" :h5Show="false"></Navbar>
    <u--form ref="userForm" :model="userInfo" :rules="rules" labelPosition="left" labelWidth="80">
		<u-form-item label="登录账号" prop="userName" borderBottom>
		  <u-input v-model="userInfo.userName" placeholder="请输入登录账号" :maxlength="30" border="none"></u-input>
		</u-form-item>	
		<u-form-item label="登录密码" prop="password" borderBottom>
		  <u-input v-model="userInfo.password" placeholder="请输入登录密码" :maxlength="30" border="none"></u-input>
		</u-form-item>	
      <u-form-item label="用户昵称" prop="nickName" borderBottom>
        <u-input v-model="userInfo.nickName" placeholder="请输入用户昵称" :maxlength="30" border="none"></u-input>
      </u-form-item>
	  <u-form-item label="性别" prop="sex" class="u-border-bottom">
	    <u-radio-group v-model="userInfo.sex">
	      <u-radio shape="circle" label="男" name="1"></u-radio>
	      <u-radio shape="circle" label="女" name="2" style="margin-left: 36rpx;"></u-radio>
	    </u-radio-group>
	  </u-form-item>
      <u-form-item label="手机号" prop="phonenumber" borderBottom>
        <u-input v-model="userInfo.phonenumber" placeholder="请输入手机号" :maxlength="30" border="none"></u-input>
      </u-form-item>
      <u-form-item label="邮箱" prop="email" borderBottom>
        <u-input v-model="userInfo.email" placeholder="请输入邮箱" :maxlength="30" border="none"></u-input>
      </u-form-item>
      <u-form-item label="备注" prop="remark">
        <u--textarea v-model="userInfo.remark" placeholder="请输入备注" :count="true" :maxlength="600" confirmType="done"></u--textarea>
      </u-form-item>
    </u--form>
    <u-row :gutter="16" style="margin-top: 36px;">
	  <u-col :span="6">
	    <u-button icon="arrow-left" text="返回" plain @click="goBack()"></u-button>
	  </u-col> 
      <u-col :span="6">
        <u-button type="primary" text="注册" @click="submit"></u-button>
      </u-col>
    </u-row>
  </view>
</template>

<script>
import * as UserManageApi from '@/api/work/userManage'
import * as ConfigApi from '@/api/system/config'
import * as LoginApi from '@/api/login'

import Navbar from '@/components/navbar/Navbar'
import qianTree from "@/components/qian-tree/qian-tree.vue"

export default {
  components: {
    Navbar,
    qianTree
  },
  data () {
    return {
      userInfo: {
		userName: '',
        nickName: '',
        status: '0',
        remark: '',
		password: '',
		phonenumber: '',
		email: '',
		sex: '1'
      },
	  rules: {
	    userName: [ { required: true, message: '请输入登录账号', trigger: ['blur', 'change'] }],
	    nickName: [ { required: true, message: '请选择用户昵称', trigger: ['blur', 'change'] } ],
	    password: [ { required: true, message: '请输入密码', trigger: ['blur', 'change'] } ],
		phonenumber: [
				{
					required: false, 
					message: '请输入手机号',
					trigger: ['change','blur'],
				},
				{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						if(value){
							return uni.$u.test.mobile(value);
						}
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}
			],
		email: [
				{
					required: false, 
					message: '请输入邮箱',
					trigger: ['change','blur'],
				},
				{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						if(value){
							return uni.$u.test.email(value);
						}
					},
					message: '邮箱不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}
			]
	  }
    }
  },
  methods: {
    submit() {
      this.$refs.userForm.validate().then(res => {
		LoginApi.register(this.userInfo).then(res => {
			uni.showToast({ title: res.msg })
			this.goBack()
		})
      });
    },
    goBack() {
      uni.navigateBack({ delta: 1});
    }
  }
}
</script>